<template>
  <div class="teacher-text-paper">
    <div class="teacher-question-list" :id="`Ti-${index + 1}`" v-for="(item,index) in questionList" :key="item.QuestionId">
      <div class="teacher-question-type">
        <div class="question-type-txt ">{{item.QuestionName}}</div>
      </div>
      <div class="teacher-question-count">
        <div class="teacher-question-num">
          <span class="que-key">{{index+1}}</span>
          /{{questionData.length}}
          <span class="que-total">({{item.Score}}分)</span>
        </div>
        <div v-if="numInputStatus!=='view' && item.QuestionType != 8 && item.QuestionType != 9 && item.QuestionType != 11 && item.QuestionType != 12 && item.QuestionType != 13">
          <a-input-number 
            :disabled='checkDisebled(item.QuestionType)' 
            v-model="item.GetScore"
            class="teacher-question-score" 
            :min='0' 
            :max='item.Score'
            @blur="onScoreBlur(item,0)"
          />
          <span class="teacher-question-score-label">分</span>
        </div>
      </div>
      <div class="teacher-question-title1" v-if="item.quesFileList">
        <div v-html="item.Title"></div>
      </div>
      <div class="teacher-question-title" v-else>
        <div v-html="item.Title"></div>
      </div>
      <addUploads v-if="item.quesFileList" :quesFileList="item.quesFileList" :mode="false"></addUploads>
      <div class="question-option-box">
          <!-- 单选题 -->
        <div v-if="item.QuestionType == 1">
          <a-radio-group
            style="width: 100%;"
            v-model="stuAnswerList[index]"
            disabled
          >
            <a-radio class="option-lis" style="display: block;lineHeight: 30px;"
              v-for="(value,key) in item.AnswerList"
              :value="value.SortOrder"
              :key="key"
            >
              {{Alphabet[key]}}.
              <span v-html="value.Content" class="option-lis-title"></span>
            </a-radio>
          </a-radio-group>
        </div>
        <!-- 多选题 -->
        <div v-if="item.QuestionType == 2">
          <a-checkbox-group
            disabled
            v-model="stuAnswerList[index]"
            @change="onChange(item,index)"
          >
            <a-checkbox
              class="option-lis"
              style="display: block;lineHeight: 30px;"
              v-for="(value,key) in item.AnswerList"
              :value="value.SortOrder"
              :key="key"
            >
              {{Alphabet[key]}}.
              <span v-html="value.Content" class="option-lis-title"></span>
            </a-checkbox>
          </a-checkbox-group>
        </div>
        <!-- 判断题 -->
        <div v-if="item.QuestionType == 3">
          <a-radio-group
            style="width: 100%;"
            v-model="stuAnswerList[index]"
            disabled
            @change="onChange(item,index)"
          >
            <a-radio
              class="option-lis"
              style="display: block;lineHeight: 30px;"
              :value="1"
            >
              {{Alphabet[0]}}.
              <span>正确</span>
            </a-radio>
            <a-radio
              class="option-lis"
              style="display: block;lineHeight: 30px;"
              :value="0"
            >
              {{Alphabet[1]}}.
              <span>错误</span>
            </a-radio>
          </a-radio-group>
        </div>
        <!-- 填空题(客观) -->
        <div v-if="item.QuestionType == 4">
          <exercise1 :showAnswer="showAnswer" :data="item" :index="index"></exercise1>
        </div>
        <!-- 填空题(主观) -->
        <div v-if="item.QuestionType == 5">
          <exercise :showAnswer="showAnswer" :data="item" :index="index"></exercise>
        </div>
        <!-- 问答题 -->
        <div v-if="item.QuestionType == 6">
          <span class="question-answer-label" style="display:inline-block;margin-bottom:5px;margin-right:10px;vertical-align: top;">学生答案:</span>
          <a-textarea class="question-answer-content" disabled placeholder="请输入答案" style="width:calc(100% - 75px);color: #333;" auto-size v-model="item.StuAnswer"/>
          <div class="Ti-pdf-input" style="line-height: 32px;width: calc(100% - 75px);" v-html="item.StuAnswer"></div>
        </div>
         <!-- 匹配题 -->
        <div v-if="item.QuestionType == 7">
          <matching :showAnswer="showAnswer" :data="item" :index="index"></matching>
        </div>
        <!-- 阅读理解 完形填空 视听题 -->
        <div v-if="item.QuestionType == 8 || item.QuestionType == 9 || item.QuestionType == 11 || item.QuestionType == 12 || item.QuestionType == 13">
          <childQuestion 
            :showAnswer="showAnswer" 
            :data="item" :index="index" 
            :numInputStatus="numInputStatus"
            :examId="questionData.examId"
            :workExamStuId="questionData.workExamStuId"
          ></childQuestion>
        </div>
      </div>
      <div class="question-answer-box" v-if="item.QuestionType != 8 && item.QuestionType != 9 && item.QuestionType != 11 && item.QuestionType != 12 && item.QuestionType != 13 && showAnswer">
          <uploads 
            v-if="item.fileList&&item.fileList.length>0"
            :examId="questionData.examId"
            :workExamStuId="questionData.workExamStuId"
            :index="index"
            :data="item"
            :mode="false"
          ></uploads>
          <div class="question-answer-label">参考答案：</div>
          <div class="question-answer-content" v-if="item.QuestionType == 1">
              {{Alphabet[answerList[index]]}}
          </div>
          <div class="question-answer-content" v-if="item.QuestionType == 2">
              <span v-for="(answer,key) in answerList[index]" :key="key">
                  {{Alphabet[answer]}}
                  <label v-if="key+1 < answerList[index].length">.</label>
              </span>
          </div>
          <div class="question-answer-content" v-if="item.QuestionType == 3">
              <div v-if="answerList[index] != ''">
                <span v-if="answerList[index] == 1">正确</span>
                <span v-if="answerList[index] == 0">错误</span>
              </div>
          </div>
          <div class="question-answer-content" v-if="item.QuestionType == 4">
            <div v-for="(item1,index) in answerList[index]" :key="index" >
                <div>
                    填空{{index+1}}：<span style="color: #0177d5;"><label v-if="!item1.Order[0].CaseSensitive">不</label>严格区分大小写</span>
                </div>
                <div v-for="(child,key) in item1.Order" :key="key">
                  
                  <!-- <span style="color: #0177d5;" v-if="child.ScoreType == 0">全字匹配</span>
                  <span style="color: #0177d5;" v-if="child.ScoreType == 1">模糊匹配</span> -->
                  <div style="display: inline-block;width: calc(100% - 100px);word-wrap: break-word;">{{key+1}}、
                    <span style="display: inline-block;vertical-align: top;width: calc(100% - 55px);" v-html="child.Content"></span>
                  </div>
                  <span style="margin-left: 10px;">({{child.Percent}}%)</span>
                </div>
            </div>
          </div>
          <div class="question-answer-content" v-if="item.QuestionType == 5">
              <div v-for="(answer,key) in JSON.parse(item.Answer)" :key="key" style="word-wrap: break-word;">
                  填空{{key+1}}：
                  <span style="display: inline-block;vertical-align: top;width: calc(100% - 55px);" v-html="answer.Content"></span>
              </div>
          </div>
          <div class="question-answer-content" v-if="item.QuestionType == 6">
              <span style="word-wrap: break-word;" v-html="item.Answer"></span>
          </div>
          <div class="question-answer-content" v-if="item.QuestionType == 7">
              <span v-for="(answer,key) in item.Answer.split(',').map(Number)" :key="key">
                  {{Alphabet[answer]}}
                  <label v-if="key+1 < item.Answer.split(',').map(Number).length">.</label>
              </span>
          </div>
      </div>
      <div class="question-ResultAnalysis-box" v-if="showAnswer">
          <div v-if="item.QuestionType == 4"> 
            <div class="question-ResultAnalysis-label">顺序匹配：</div>
            <div class="question-ResultAnalysis-content">
                <span v-if="!item.IsOrderMatching">否</span>
                <span v-else>是</span>
            </div>
          </div>
          <div class="question-ResultAnalysis-label">答案解析：</div>
          <div class="question-ResultAnalysis-content">
              <span v-if="item.ResultAnalysis" v-html="item.ResultAnalysis"></span>
              <span v-else>暂无答案解析</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import addUploads from '@/components/addTi/addUpload/index.vue';
import uploads from '@/components/addTi/upload/index.vue';
import exercise from './exercise.vue';
import exercise1 from './exercise1.vue';
import matching from './matching.vue';
import childQuestion from './childQuestion.vue';
export default {
  data() {
    return {
      Alphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      loading: false,
      questionList: [],
      answerList: [],
      stuAnswerList:[],
      questiontype:{4:true,5:true,6:true,12:true,13:true}
    };
  },
  components: {
    addUploads,
    uploads,
    exercise,
    exercise1,
    matching,
    childQuestion
  },
  props: {
    questionData: {
      type: Array,
      default: () => []
    },
    showAnswer: {
      type: Boolean,
      default: false
    },
    numInputStatus:{
      type:String,
      default:'view', //view预览  review批阅  examine查看已批未批
    }
  },
  watch: {
    showAnswer(e) {
      if (e) {
        this.setAnswer();
      } else {
        this.setNoAnswer();
      }
    }
  },
  mounted() {
    this.questionList = this.questionData;
    if (this.showAnswer) {
      this.setAnswer();
    } else {
      this.setNoAnswer();
    }
  },
  methods: {
      checkDisebled(value){
        switch (this.numInputStatus) {
          case 'review':
            return !this.questiontype[value]
          case 'view':
            return true
          case 'examine':
            return true
          default:
            break;
        }
      },
      setAnswer() {
        this.loading = true;
        this.answerList = [];
        this.stuAnswerList = []
        for (let i = 0; i < this.questionData.length; i++) {
            let answer = '';
            if (this.questionData[i].QuestionType == 1 || this.questionData[i].QuestionType == 3) {
              if (this.questionData[i].StuAnswer == '' || this.questionData[i].StuAnswer == null) {
                  answer = '';
              } else {
                  answer = Number(this.questionData[i].StuAnswer);
              }
            } else if (this.questionData[i].QuestionType == 2) {
              if (this.questionData[i].StuAnswer == '' || this.questionData[i].StuAnswer == null) {
                  answer = '';
              } else {
                  answer = this.questionData[i].StuAnswer.split(',').map(Number);
              }
            } else if(this.questionData[i].QuestionType == 4){
              answer = []
              for (let j = 0; j < this.questionData[i].AnswerList.length; j++) {
                let key = this.questionData[i].AnswerList[j].SortOrder;
                if (answer.length < key + 1) {
                  let list = {
                    Order: [
                      {
                        SortOrder: this.questionData[i].AnswerList[j].SortOrder,
                        Content: this.questionData[i].AnswerList[j].Content,
                        Percent: this.questionData[i].AnswerList[j].Percent,
                        CaseSensitive: this.questionData[i].AnswerList[j].CaseSensitive,
                        ScoreType: this.questionData[i].AnswerList[j].ScoreType
                      }
                    ]
                  };
                  answer.push(list);
                } else {
                  let lis = {
                    SortOrder: this.questionData[i].AnswerList[j].SortOrder,
                    Content: this.questionData[i].AnswerList[j].Content,
                    Percent: this.questionData[i].AnswerList[j].Percent,
                    CaseSensitive: this.questionData[i].AnswerList[j].CaseSensitive,
                    ScoreType: this.questionData[i].AnswerList[j].ScoreType
                  };
                  answer[key].Order.push(lis);
                }
              }
            }
          this.stuAnswerList.push(answer)
        }
        for (let i = 0; i < this.questionData.length; i++) {
            let answer = '';
            if (this.questionData[i].QuestionType == 1) {
              if (this.questionData[i].Answer == '' || this.questionData[i].Answer == null) {
                  answer = '';
              } else {
                  answer = Number(this.questionData[i].Answer);
              }
            } else if (this.questionData[i].QuestionType == 3) {
              if (this.questionData[i].Answer == '' || this.questionData[i].Answer == null) {
                  answer = '';
              } else {
                  answer = Number(this.questionData[i].Answer);
              }
            } else if (this.questionData[i].QuestionType == 2) {
              if (this.questionData[i].Answer == '' || this.questionData[i].Answer == null) {
                  answer = '';
              } else {
                  answer = this.questionData[i].Answer.split(',').map(Number);
              }
            } else if(this.questionData[i].QuestionType == 4){
              answer = []
              for (let j = 0; j < this.questionData[i].AnswerList.length; j++) {
                let key = this.questionData[i].AnswerList[j].SortOrder;
                if (answer.length < key + 1) {
                  let list = {
                    Order: [
                      {
                        SortOrder: this.questionData[i].AnswerList[j].SortOrder,
                        Content: this.questionData[i].AnswerList[j].Content,
                        Percent: this.questionData[i].AnswerList[j].Percent,
                        CaseSensitive: this.questionData[i].AnswerList[j].CaseSensitive,
                        ScoreType: this.questionData[i].AnswerList[j].ScoreType
                      }
                    ]
                  };
                  answer.push(list);
                } else {
                  let lis = {
                    SortOrder: this.questionData[i].AnswerList[j].SortOrder,
                    Content: this.questionData[i].AnswerList[j].Content,
                    Percent: this.questionData[i].AnswerList[j].Percent,
                    CaseSensitive: this.questionData[i].AnswerList[j].CaseSensitive,
                    ScoreType: this.questionData[i].AnswerList[j].ScoreType
                  };
                  answer[key].Order.push(lis);
                }
              }
            }
          this.answerList.push(answer)
        }
        this.loading = false;
      },
      setNoAnswer() {
        this.loading = true;
        this.answerList = [];
        for (let i = 0; i < this.questionData.length; i++) {
            let answer = '';
            this.answerList.push(answer);
        }
        this.loading = false;
      },
      onScoreBlur(val,type){
        this.$parent.changeSingleQues(val,type)
      }
  }
};
</script>

<style>
</style>